<template>
  <div class="module">
    <div class="qdwl">
      <div class="classify">
        <border-box-small>
          <div class="title-wrap">
            <svg-icon class="icon" icon-class="icon_qudaowailian"></svg-icon>
            <span>渠道外联</span>
          </div>
        </border-box-small>
      </div>
      <div class="content-wrap">
        <div class="xt">
          <span>电子银行系统</span>
          <svg-icon class="icon" icon-class="icon_stars"></svg-icon>
        </div>
        <div class="item-wrap">
          <text-item label="蜀信e" :obj="sysObj"></text-item>
          <text-item label="电子银行系统" :obj="sysObj"></text-item>
          <text-item label="呼叫中心" :obj="sysObj"></text-item>
          <text-item label="短信银行" :obj="sysObj"></text-item>
          <text-item label="ATM/POS" :obj="sysObj"></text-item>
        </div>
      </div>
    </div>
    <div class="khcp">
      <div class="classify">
        <border-box-small>
          <div class="title-wrap">
            <svg-icon class="icon" icon-class="icon_kehuchanpin"></svg-icon>
            <span>客户产品</span>
          </div>
        </border-box-small>
      </div>
      <div class="content-wrap">
        <div class="content-left">
          <div class="top-item">
            <text-item label="ESB" :obj="sysObj" tt="2"></text-item>
          </div>
          <div class="item-wrap-wrap">
            <div class="item-wrap-left">
              <div class="title">核心业务系统</div>
              <div class="text-item-wrap">
                <text-item label="核心业务" :obj="sysObj" tt="3"></text-item>
                <text-item label="股权管理" :obj="sysObj" tt="3"></text-item>
                <text-item label="支付密码" :obj="sysObj" tt="3"></text-item>
                <text-item label="控管平台" :obj="sysObj" tt="3"></text-item>
                <text-item label="资金业务" :obj="sysObj" tt="3"></text-item>
                <text-item label="国际业务" :obj="sysObj" tt="3"></text-item>
              </div>
            </div>
            <div class="item-wrap-right">
              <div class="title">中间业务支付系统</div>
              <div class="text-item-wrap">
                <text-item label="统一支付" :obj="sysObj" tt="3"></text-item>
                <text-item label="综合理财" :obj="sysObj" tt="3"></text-item>
                <text-item label="特色业务" :obj="sysObj" tt="3"></text-item>
              </div>
            </div>
          </div>
        </div>
        <div class="content-right">
          <div class="top-item">
            <text-item label="PB" :obj="sysObj" tt="2"></text-item>
          </div>
          <div class="item-wrap">
            <div class="title">信贷业务系统</div>
            <div class="text-item-wrap">
              <text-item label="小额农贷" :obj="sysObj" tt="3"></text-item>
              <text-item label="信用卡" :obj="sysObj" tt="3"></text-item>
              <text-item label="票据业务" :obj="sysObj" tt="3"></text-item>
              <text-item label="贷款业务" :obj="sysObj" tt="3"></text-item>
              <text-item label="ECIF" :obj="sysObj" tt="3"></text-item>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="jcpt">
      <div class="classify">
        <border-box-small>基础平台</border-box-small>
      </div>
      <div class="content-wrap">
        <div class="item-wrap">
          <text-item label="统一密码服务平台" :obj="sysObj"></text-item>
          <text-item label="员工身份认证" :obj="sysObj"></text-item>
          <text-item label="文件传输平台" :obj="sysObj"></text-item>
          <text-item label="系统客户身份认证" :obj="sysObj"></text-item>
          <text-item label="外联前置" :obj="sysObj"></text-item>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BorderBoxSmall from "@/components/BorderBoxSmall.vue";
import TextItem from "@/components/TextItem.vue";
import { getTpt } from "@/api/api-mock";
let timer;
export default {
  components: { BorderBoxSmall, TextItem },
  data() {
    return {
      sysObj: {}
    };
  },
  mounted() {
    this.getData();
    timer = setInterval(this.getData, 1000 * 30)
  },
  beforeDestroy() {
    if (timer) {
      clearInterval(timer)
    }
  },
  methods: {
    getData() {
      getTpt().then(res => {
        if (res.success) {
          const arr = res.obj;
          const obj = arr.reduce((a, b) => {
            a[b.sysName] = b.status;
            return a;
          }, {});
          this.sysObj = obj;
          console.log(obj)
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.module {
  width: 100%;
  height: 100%;
  > div {
    border: 0.5px dashed rgba(107, 123, 176, 0.3);
    display: flex;
    align-items: center;
    padding: 0 20px;
  }
  .qdwl {
    width: 861px;
    height: 68px;
    margin: 6px auto;
    .classify {
      height: 52px;
      .title-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        .icon {
          width: 30px;
          height: 25px;
          margin-bottom: 6px;
        }
      }
    }
    .content-wrap {
      height: 52px;
      flex: 1;
      .xt {
        height: 22px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        font-size: 12.28px;
        color: #fff;
        span {
          position: relative;
          top: -2px;
        }
        .icon {
          width: 20px;
          height: 12px;
          margin-left: 10px;
        }
      }
      .item-wrap {
        height: 30px;
        padding: 0 18px;
        background: #0c234b;
        box-shadow: 0px 0px 2px 0.5px rgba(255, 255, 255, 0.3);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  .khcp {
    width: 861px;
    height: 135px;
    margin: 0 auto 6px;
    .classify {
      height: 119px;
      .title-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        .icon {
          width: 31px;
          height: 26px;
          margin-bottom: 9px;
        }
      }
    }
    .content-wrap{
      height: 119px;
      flex: 1;
      display: flex;
      justify-content: space-between;
      .content-left{
        width: 460px;
        height: 100%;
        .top-item{
          height: 17px;
          margin-bottom: 5px;
        }
        .item-wrap-wrap{
          height: 98px;
          display: flex;
          justify-content: space-between;
          .item-wrap-left{
            width: 254px;
            height: 100%;
            background: #0c234b;
            box-shadow: 0px 0px 2px 0.5px rgba(255, 255, 255, 0.3);
          }
          .item-wrap-right{
            width: 200px;
            height: 100%;
            background: #0c234b;
            box-shadow: 0px 0px 2px 0.5px rgba(255, 255, 255, 0.3);
          }
        }
      }
      .content-right{
        width: 240px;
        height: 100%;
        .top-item{
          height: 17px;
          margin-bottom: 5px;
        }
        .item-wrap{
          height: 98px;
          background: #0c234b;
          box-shadow: 0px 0px 2px 0.5px rgba(255, 255, 255, 0.3);
        }
      }
      .title{
        font-size: 10.75px;
        color: #fff;
        line-height: 28px;
      }
      .text-item-wrap{
        display: flex;
        justify-content: space-around;
        height: 62px;
      }
    }
  }
  .jcpt {
    width: 861px;
    height: 46px;
    margin: 0 auto;
    .classify {
      height: 30px;
    }
    .content-wrap {
      height: 30px;
      flex: 1;
      .item-wrap {
        height: 30px;
        padding: 0 18px;
        background: #0c234b;
        box-shadow: 0px 0px 2px 0.5px rgba(255, 255, 255, 0.3);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  .classify {
    width: 82px;
    margin-right: 20px;
  }
}
</style>
